<template>
  <div>
    <div class="blogitem">
      <el-card class="itemCard">

        <el-timeline v-for="item in blogs"
                     :key="item.id">
          <el-timeline-item v-if="page.total > 0"
                            :timestamp="item.created"
                            placement="top">
            <el-card>
              <el-row>
                <el-col :span="24">
                  <router-link :to="{name:'BlogDetail',params:{blogId:item.id}}">{{item.title}}</router-link>

                  <el-button type="primary"
                             style="margin-left:10px"
                             icon="el-icon-edit"
                             @click="edit(item.id)"
                             v-if="item.editFlag == 0"
                             size="mini"
                             circle></el-button>
                  <el-button type="danger"
                             size="mini"
                             v-if="item.editFlag == 0"
                             icon="el-icon-delete"
                             circle></el-button>
                </el-col>
              </el-row>
              <p>{{item.description}}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>

        <el-empty v-if="blogs.length == 0"
                  style="height: 60%;"
                  description="未找到文章"></el-empty>
        <div class="page">

          <el-pagination @size-change="handleSizeChange"
                         background
                         @current-change="handleCurrentChange"
                         :current-page="page.pageNum"
                         :page-sizes="[10, 20, 30, 40]"
                         :page-size="page.pageSize"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="page.total">
          </el-pagination>

        </div>

      </el-card>
    </div>

  </div>
</template>
<script>
export default {
  name: 'BlogList',
  components: {},
  props: {},
  data() {
    return {
      blogs: [],
      page: {
        pageSize: 10,
        pageNum: 1,
        total: 0,
      },
    }
  },
  created() {
    this.getPage()
  },
  methods: {
    handleSizeChange(pageSize) {
      this.page.pageSize = pageSize
      this.getPage()
    },
    handleCurrentChange(pageNum) {
      this.page.pageNum = pageNum
      this.getPage()
    },
    edit(id) {
      this.$router.push({ name: 'BlogEdit', params: { blogId: id } })
    },
    getPage() {
      this.$axios
        .get('/blog/page', {
          params: this.page,
        })
        .then((res) => {
          this.blogs = res.data.data.records
          this.page.total = res.data.data.total
          this.page.size = res.data.data.pageSize
          this.page.pages = res.data.data.pageNum
        })
    },
  },
  watch: {},
  computed: {},
  mounted() {},
}
</script>
<style scoped>
.blogitem {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.page {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.itemCard {
  margin-top: 1%;
}
</style>